<template>
  <div>
    <iframe id="printIframe" ref="printIframe" frameborder="0" scrolling="no" style="margin: 0px;padding: 0px;width: 0px;height: 0px;" />
    <div ref="printDIV" style="display:none">
      <div
        v-for="(item, index) in printData"
        :key="index"
        style="width: 800px;height: auto;padding: 10px;font-size: 25px;
  page-break-after:always;display: flex;flex-direction: column;
  "
      >

        <table style="border-collapse:collapse;" width="100%">
          <tbody>
            <tr height="50px">
              <td rowspan="1" colspan="9" valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;letter-spacing: 20px;font-size: 20px">计划单</td>
            </tr>
            <tr height="40px">
              <td valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">计划单号</td>
              <td rowspan="1" colspan="8" valign="center" style="font-weight:400;font-size: 15px;width:3653px;text-align:left;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;padding-left: 20px">{{ item.planCode }}</td>
            </tr>
            <tr height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">规格型号</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:3653px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">波纹管外径</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:3095px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">成品内径</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:3560px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">波纹管长度</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2955px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">成品长度</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2932px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">接管长度</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2048px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">结构</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2676px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">物料单位</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2513px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">生产数量</td>
            </tr>
            <tr v-for="(item2,index2) in item.data" :key="index2" height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.model }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:3653px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.bellowsOuterDiameter }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:3095px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.finishedInnerDiameter }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:3560px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.bellowsLength }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2955px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.finishedLength }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2932px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.takeoverLength }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2048px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.structure }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2676px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.unit }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2513px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item2.num }}</td>
            </tr>
            <tr height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">合计</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:3653px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;width:3095px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;width:3560px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;width:2955px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;width:2932px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;width:2048px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;width:2676px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;" />
              <td valign="center" style="font-weight:400;font-size: 15px;width:2513px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">{{ item.totalNum }}</td>
            </tr>
            <tr height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">备注</td>
              <td rowspan="1" colspan="8" valign="center" style="font-weight:400;font-size: 15px;width:3653px;text-align:left;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;padding-left: 20px">{{ item.remark }}</td>
            </tr>
            <tr height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">生产交期</td>
              <td rowspan="1" colspan="3" valign="center" style="font-weight:400;font-size: 15px;width:3653px;text-align:left;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;padding-left: 20px">{{ item.deliveryDate }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2955px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">制单时间</td>
              <td rowspan="1" colspan="4" valign="center" style="font-weight:400;font-size: 15px;width:2932px;text-align:left;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;padding-left: 20px">{{ item.createTime }}</td>
            </tr>
            <tr height="30px">
              <td valign="center" style="font-weight:400;font-size: 15px;width:3770px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">制单人</td>
              <td rowspan="1" colspan="3" valign="center" style="font-weight:400;font-size: 15px;width:3653px;text-align:left;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;padding-left: 20px">{{ item.realName }}</td>
              <td valign="center" style="font-weight:400;font-size: 15px;width:2955px;text-align:center;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;">批准人</td>
              <td rowspan="1" colspan="4" valign="center" style="font-weight:400;font-size: 15px;width:2932px;text-align:left;color:#000000;border-top:solid #000000 1px;border-right:solid #000000 1px;border-bottom:solid #000000 1px;border-left:solid #000000 1px;padding-left: 20px" />
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PrintSaleProductionPlan',
  props: {
    printData: {}
  },
  data() {
    return {
    }
  },
  watch: {
    printData(val) {
      console.log(val)
      if (val.length > 0) {
        setTimeout(() => {
          this.print()
        }, 200)
      }
    }
  },
  mounted() {

  },
  methods: {
    print() {
      // // 拿到要打印区域的dom结构并设置到Iframe的srcdoc属性上面
      var printIframe = this.$refs.printIframe
      var newstr = this.$refs.printDIV.innerHTML
      printIframe.setAttribute('srcdoc', newstr)
      printIframe.onload = function() {
      // 去掉iframe里面的dom的body的padding margin的默认数值
        printIframe.contentWindow.document.body.style.padding = '0px'
        printIframe.contentWindow.document.body.style.margin = '0px'
        // 开始打印
        printIframe.contentWindow.focus()
        printIframe.contentWindow.print()
      }
    },
    print2() {
    }
  }
}
</script>
<style scoped>

</style>
